/**index.wxss**/
.container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #e88f22;

  .header {
    height: 50rpx;
    box-sizing: border-box;
    align-items: center;
    flex-direction: row;
    display: flex;
    justify-content: flex-end;
    color: #fff;
    box-shadow: #4d4d4d 0 -2rpx 0 0 inset,
      rgb(255 255 255 / 9%) 0 -10rpx 0 0 inset, #1e1e1e 0 8rpx 0 0 inset;
    background: #242424;
    text-align: center;
    border-radius: 4rpx;
    box-sizing: border-box;
  }

  .content {
    flex: 1;
    display: flex;
    border-top: 2rpx solid #000;
    height: calc(100% - 100rpx);
    background-color: #000;
    box-sizing: border-box;

    .left {
      width: 150rpx;
      display: flex;
      flex-direction: column;
      color: #fff;
      box-shadow: #4d4d4d 0 -2rpx 0 0 inset,
        rgb(255 255 255 / 9%) 0 -10rpx 0 0 inset, #1e1e1e 0 8rpx 0 0 inset;
      background: #242424;
      text-align: center;
      border-radius: 8rpx;
      box-sizing: border-box;
    }

    .right {
      box-sizing: border-box;
      flex: 1;
      display: flex;
      box-shadow: #4d4d4d 0 -2rpx 0 0 inset,
        rgb(255 255 255 / 9%) 0 -10rpx 0 0 inset, #1e1e1e 0 8rpx 0 0 inset;
      background: #242424;
      text-align: center;
      border-radius: 8rpx;
      padding-right: 2rpx;
    }
  }
}

button.time-key {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2rpx solid #000;
  box-sizing: border-box;
  width: 60rpx;
  height: 40rpx;
  padding: 0;
  color: #aaa;
  margin-left: 4rpx;
  margin-right: 4rpx;

  border-radius: 8rpx;
  box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset,
    rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset,
    rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;
  background-color: #343434;
  background-image: -moz-linear-gradient(
    top,
    rgba(78, 78, 78, 0.15) 0%,
    rgba(65, 65, 65, 0.15) 2%,
    rgba(59, 59, 59, 0.15) 5%,
    rgba(56, 56, 56, 0.15) 32%,
    rgba(54, 54, 54, 0.15) 33%,
    rgba(53, 53, 53, 0.15) 46%,
    rgba(51, 51, 51, 0.15) 47%,
    rgba(50, 50, 50, 0.15) 60%,
    rgba(48, 48, 48, 0.15) 61%,
    rgba(42, 42, 42, 0.15) 100%
  );
  background-image: -webkit-linear-gradient(
    top,
    rgba(78, 78, 78, 0.15) 0%,
    rgba(65, 65, 65, 0.15) 2%,
    rgba(59, 59, 59, 0.15) 5%,
    rgba(56, 56, 56, 0.15) 32%,
    rgba(54, 54, 54, 0.15) 33%,
    rgba(53, 53, 53, 0.15) 46%,
    rgba(51, 51, 51, 0.15) 47%,
    rgba(50, 50, 50, 0.15) 60%,
    rgba(48, 48, 48, 0.15) 61%,
    rgba(42, 42, 42, 0.15) 100%
  );
  background-image: linear-gradient(
    to bottom,
    rgba(78, 78, 78, 0.15) 0%,
    rgba(65, 65, 65, 0.15) 2%,
    rgba(59, 59, 59, 0.15) 5%,
    rgba(56, 56, 56, 0.15) 32%,
    rgba(54, 54, 54, 0.15) 33%,
    rgba(53, 53, 53, 0.15) 46%,
    rgba(51, 51, 51, 0.15) 47%,
    rgba(50, 50, 50, 0.15) 60%,
    rgba(48, 48, 48, 0.15) 61%,
    rgba(42, 42, 42, 0.15) 100%
  );
  background-size: 8rpx 8rpx;

  &.time-key-active {
    box-shadow: rgb(0 0 0 / 40%) 0 0 0 1px inset;
    background-color: #2d2d2d;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #2e2e2e 50%);
    background-size: 4rpx 4rpx;
    color: #fff;
    transform: scale(0.95);
  }

  &:first-child {
    border-top: none;
  }
}

button.main-key {
  flex: 1;
  width: 10rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #fff;
  border-left: 2rpx solid #000;
  height: 100%;
  box-sizing: border-box;
  border-radius: 8rpx;
  box-shadow: rgba(255, 255, 255, 0.85) 0 1px 0px 0px inset,
    rgba(255, 255, 255, 0.95) 0 1px 0px 1px inset,
    rgba(0, 0, 0, 0.3) 0 1px 2px 0px, rgba(9, 9, 9, 0.4) 0 2px 3px 2px;
  background-color: #fff;
  background-image: linear-gradient(
    to bottom,
    rgba(78, 78, 78, 0.15) 0%,
    rgba(65, 65, 65, 0.15) 2%,
    rgba(59, 59, 59, 0.15) 5%,
    rgba(56, 56, 56, 0.15) 32%,
    rgba(54, 54, 54, 0.15) 33%,
    rgba(53, 53, 53, 0.15) 46%,
    rgba(51, 51, 51, 0.15) 47%,
    rgba(50, 50, 50, 0.15) 60%,
    rgba(48, 48, 48, 0.15) 61%,
    rgba(42, 42, 42, 0.15) 100%
  );
  background-size: 8rpx 8rpx;

  &:active {
    box-shadow: rgb(0 0 0 / 40%) 0 0 0 1px inset;
    background-color: #fff;
    background-image: linear-gradient(rgba(255, 255, 255, 0) 50%, #fff 50%);
    background-size: 4rpx 4rpx;
  }

  .power {
    line-height: 32rpx;
    height: 32rpx;
  }

  .tone {
    line-height: 32rpx;
    height: 32rpx;
  }

  .light {
    line-height: 32rpx;
    height: 32rpx;
    transform: rotate(180deg);
  }

  &.main-key-active {
    box-shadow: rgb(0 0 0 / 40%) 0 0 0 1px inset;
    background-color: #fff;
    color: #e88f22;
    background-image: linear-gradient(rgba(37, 172, 43, 0) 50%, #fff 50%);
    background-size: 4rpx 4rpx;
  }
}

.assist-key {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2rpx solid #000;
  box-sizing: border-box;
  color: #aaa;

  border-radius: 8rpx;
  box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset,
    rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset,
    rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;
  background-color: #343434;
  background-image: -moz-linear-gradient(
    top,
    rgba(78, 78, 78, 0.15) 0%,
    rgba(65, 65, 65, 0.15) 2%,
    rgba(59, 59, 59, 0.15) 5%,
    rgba(56, 56, 56, 0.15) 32%,
    rgba(54, 54, 54, 0.15) 33%,
    rgba(53, 53, 53, 0.15) 46%,
    rgba(51, 51, 51, 0.15) 47%,
    rgba(50, 50, 50, 0.15) 60%,
    rgba(48, 48, 48, 0.15) 61%,
    rgba(42, 42, 42, 0.15) 100%
  );
  background-image: -webkit-linear-gradient(
    top,
    rgba(78, 78, 78, 0.15) 0%,
    rgba(65, 65, 65, 0.15) 2%,
    rgba(59, 59, 59, 0.15) 5%,
    rgba(56, 56, 56, 0.15) 32%,
    rgba(54, 54, 54, 0.15) 33%,
    rgba(53, 53, 53, 0.15) 46%,
    rgba(51, 51, 51, 0.15) 47%,
    rgba(50, 50, 50, 0.15) 60%,
    rgba(48, 48, 48, 0.15) 61%,
    rgba(42, 42, 42, 0.15) 100%
  );
  background-image: linear-gradient(
    to bottom,
    rgba(78, 78, 78, 0.15) 0%,
    rgba(65, 65, 65, 0.15) 2%,
    rgba(59, 59, 59, 0.15) 5%,
    rgba(56, 56, 56, 0.15) 32%,
    rgba(54, 54, 54, 0.15) 33%,
    rgba(53, 53, 53, 0.15) 46%,
    rgba(51, 51, 51, 0.15) 47%,
    rgba(50, 50, 50, 0.15) 60%,
    rgba(48, 48, 48, 0.15) 61%,
    rgba(42, 42, 42, 0.15) 100%
  );
  background-size: 8rpx 8rpx;

  &.assist-key-active {
    box-shadow: rgb(0 0 0 / 40%) 0 0 0 1px inset;
    background-color: #2d2d2d;
    background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #2e2e2e 50%);
    background-size: 4rpx 4rpx;
    transform: scale(0.95);
    color: #fff;
  }

  &:first-child {
    border-top: none;
  }
}

.scroll-list-container {
  display: flex;
  margin: 8rpx;
}

/* 数据展示区 */
.scroll-list {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  background-color: #fff;
  border: 2rpx solid #b5612c;
  box-sizing: border-box;
  box-shadow: 2rpx 2rpx 5rpx #b5612c inset;
  border-radius: 4rpx;
}

.scroll-item {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}

/* 编辑按钮组 */
.btn-edit-groups {
  width: 300rpx;
  margin-left: 10rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.btnEditJianPu .btnsetting {
  background-color:#233;
  color:#eee;
}
.btnDeleteJianPu .btnsetting {
  background-color: #f00;
  color: #eee;
}
